<template>
  <div class="">
    <Head></Head>
    <el-container>
      <!-- <el-aside width="200px">
        <el-col :span="12">
          <h5>自定义颜色</h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside> -->
      <el-main>
        <div style="margin-left:16%;margin-top:3%">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size:16px">
          <el-breadcrumb-item :to="{ path: '/items' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>购物车</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        <el-table :data="cartOrders" style="width: 1000px;margin-left:20%;margin-top:50px" >
          <el-table-column label="商品图片" width="180">
            <template slot-scope="scope">
              <img
                height="100px"
                width="100px"
                :src="'data:image/jpg;base64,' + scope.row.itemInfoImg"
              />
            </template>
          </el-table-column>
          <el-table-column prop="itemName" label="商品名称" width="180px">
          </el-table-column>
          <el-table-column prop="buyNum" label="数量" width="180px">
          </el-table-column>
          <el-table-column prop="itemPrice" label="单价" width="180px">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope" class="pictd">
              <el-button
                type="primary"
                size="small"
                @click="updataNum(scope.row.itemId)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="del(scope.row.itemId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-left:58%">
          <!-- <span>总价：</span>
          <p>BuyNum</p> -->
          <el-button type="danger" @click="clear">清空购物车</el-button>
          <el-button type="danger" @click="buy">结算</el-button>
        </div>
        <div style="margin-left:50%"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Head from "../cart/head";
import { clearCart, updateCart } from "../../service/cart";
import { mapState, mapActions,mapMutations } from "vuex";
export default {
  components: { Head },
  data() {
    return {
      orders: [],
    };
  },
  computed: { ...mapState("cart", ["item", "cartOrders", "cartOrder","totalPrice","userSerial"]) },
  methods: {
    updataNum(itemId) {
      this.$prompt("请输购买数量", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[1-9]\d*$/,
        inputErrorMessage: "输入格式不正确",
      })
        .then(({ value }) => {
          this.cartOrder.buyNum = value;
          this.cartOrder.item.itemId = itemId;
          this.cartOrder.typeCode = 1;
          this.cartOrder.userId = this.userSerial;
          updateCart(this.cartOrder).then(() => {
            //删除之后更新表格
            this.getCartOrders(this.userSerial);
          });
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    del(itemId) {
      this.cartOrder.item.itemId = itemId;
      this.cartOrder.typeCode = 2;
      this.cartOrder.userId = this.userSerial;
      this.$confirm("是否删除该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log( this.cartOrder)
          updateCart( this.cartOrder).then(() => {
            //删除之后更新表格
            this.getCartOrders(this.userSerial);
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    buy() {
      //结算
      this.$router.push("/close")
    },
    clear() {
      //清空购物车
      this.$confirm("是否清空购物车?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          clearCart(this.userSerial).then(() => {
            this.getCartOrders(this.userSerial);
          });

          this.$message({
            type: "success",
            message: "清空成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    ...mapMutations("cart", ["setUserSerial"]),
    ...mapActions("cart", ["getCartOrders","setUser"]),
  },
  async created() {  //获得订单  1为用户id
   await this.setUser();
    this.getCartOrders(this.userSerial);},
  
};
</script>

<style></style>
